import type {Point} from '@/js/home/data.d.ts'
import {Message, MessageType, Point} from '@/js/home/data.d.ts'
import {usePlayerStore} from "@/stores/player";
import {pinia} from "@/stores";
import {ElMessage} from "element-plus";

//websocket
let websocket: WebSocket;

//存储点的位置
let pointList: Point[][] = [];


//画板上下文
let canvas: HTMLCanvasElement
let context: CanvasRenderingContext2D;
let isDraw: boolean;
const store = usePlayerStore(pinia)

//初始画布
const initCanvas = (c: HTMLCanvasElement, ws: WebSocket) => {
    websocket = ws
    canvas = c
    const parentElement = c.parentElement;
    c.width = parentElement.offsetWidth
    c.height = parentElement.offsetHeight
    context = c.getContext('2d') as CanvasRenderingContext2D;
    context.strokeStyle = 'black'
    context.lineWidth = 5
    c.addEventListener('mousedown', canvasMouseDown)
    c.addEventListener('mousemove', canvasMouseMove)
    c.addEventListener('mouseup', canvasMouseUp)
    c.addEventListener('touchstart', touchDown)
    c.addEventListener('touchmove', touchMove)
    c.addEventListener('touchend', touchEnd)

    //连接成功之后
    ws.onopen = function () {
        ElMessage({
            message: '连接服务器成功！',
            type: "success",
        })
    }
    //如果遇到错误则结束定时器
    ws.onerror = () => {
        ElMessage({
            message: '服务器连接失败',
            type: "error"
        })
        clearInterval(t)
    }
    return {
        context,
        width: canvas.width,
        height: canvas.height
    }
}

//清除画布
const clearCanvas = () => {
    const w = canvas.width;
    const h = canvas.height;
    context.clearRect(0, 0, w, h)
    pointList = []
}

export const drawPointData = (data: Point[][]) => {
    clearCanvas()
    context.strokeStyle = 'black'
    context.lineWidth = 5
    data.forEach((v: Point[]) => {
        context.beginPath()
        v.forEach(k => {
            context.lineTo(k.x, k.y)
            context.stroke()
        })
    })
}

const touchDown = (e: TouchEvent) => {
    if (!store.isMeDraw) {
        isDraw = false
        return
    }
    isDraw = true
    const x = e.touches[0].clientX - canvas.offsetLeft
    const y = e.touches[0].clientY - canvas.offsetTop
    pointList.push([])
    context.moveTo(x, y)
    context.beginPath()
}
const touchMove = (e: TouchEvent) => {
    if (!isDraw) {
        return
    }
    const x = e.touches[0].clientX - canvas.offsetLeft
    const y = e.touches[0].clientY - canvas.offsetTop
    pointList[pointList.length - 1].push(new Point(x, y))
    context.lineTo(x, y)
    context.stroke()
}
const touchEnd = (e: TouchEvent) => {
    console.log('手机抬起')
    if (store.isMeDraw) {
        //停止发送图片数据
        websocket.send(JSON.stringify(new Message(MessageType.DRAW, pointList)))
    }
}

//鼠标按下
const canvasMouseDown = (e: MouseEvent) => {
    if (!store.isMeDraw) {
        return
    }
    isDraw = true
    const x = e.clientX - canvas.offsetLeft
    const y = e.clientY - canvas.offsetTop
    context.beginPath()
    context.strokeStyle = 'black'
    context.lineWidth = 5
    pointList.push([])
    context.moveTo(x, y)
}

//鼠标移动
const canvasMouseMove = (e: MouseEvent) => {
    if (!isDraw) {
        return
    }
    const x = e.clientX - canvas.offsetLeft
    const y = e.clientY - canvas.offsetTop
    console.log(x, y)
    pointList[pointList.length - 1].push(new Point(x, y))
    context.lineTo(x, y)
    context.stroke()
}

//鼠标抬起
const canvasMouseUp = (e: MouseEvent) => {
    //取消当前绘画
    isDraw = false;
}

export {
    initCanvas,
    clearCanvas
}
